<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://res.wx.qq.com/open/js/cloudbase/1.1.0/cloud.js"></script>
    <link rel="stylesheet" href="static/css/BannerManagement.css">


</head>

<body>
    <div id="banner">
        <div class="box">
            <table>
                <tr>
                    <th>部门</th>
                    <th>操作</th>
                </tr>
                <tr>
                    <td>{{department[0]}}</td>
                    <td @click="previewClick"  >预览</td>
                    <td @click="reviseClick" >修改</td>
                </tr>
                <tr>
                    <td>{{department[1]}}</td>
                    <td @click="previewClick">预览</td>
                    <td @click="reviseClick">修改</td>
                </tr>
                <tr>
                    <td >{{department[2]}}</td>
                    <td @click="previewClick">预览</td>
                    <td @click="reviseClick">修改</td>
                </tr>
                <tr>
                    <td>{{department[3]}}</td>
                    <td @click="previewClick">预览</td>
                    <td @click="reviseClick">修改</td>
                </tr>
                <tr>
                    <td>{{department[4]}}</td>
                    <td @click="previewClick">预览</td>
                    <td @click="reviseClick">修改</td>
                </tr>
                <tr>
                    <td>{{department[5]}}</td>
                    <td @click="previewClick">预览</td>
                    <td @click="reviseClick">修改</td>
                </tr>
                <tr>
                    <td>{{department[6]}}</td>
                    <td @click="previewClick">预览</td>
                    <td @click="reviseClick">修改</td>
                <tr>
            </table>
        </div>

        <!-- <div class="picture"  :style="{visibility:isHidden}"> -->
            <!-- 预览图片 -->
        <div class="picture" v-show="previewShow">
            <div style="height: 100%; width: 100%;">
                <img src="" style="height: 100%;">
            </div>
            <div @click="shutDown" class="pictureOne">
                <img src="../Manage/static/images/304错误、关闭、取消-线性圆框 (1).png" class="pictureOne">
            </div>
        </div>

        <!-- 上传图片 -->
        <div  v-show="reviseShow" >
            <div class="revise"  >
                <img src="../Manage/static/images/选择文件.png" style="height: 100%; width:100%;">
            </div>
            <img src="../Manage/static/images/kitekat-18 1.png" class="pictureTwo">
            <div class="verify"> 确认上传</div>
            <div class="cancel" @click="Cancel"> 取消</div>
        </div>
    </div>
</body>

<script>
    let inputElement = null
    const c = window.cloud
    Vue.prototype.cloud = c
    Vue.config.productionTip = false //阻止vue在启动时生成生产提示
    Vue.config.devtools = true;
    new Vue({
        el: "#banner",
        data() {
            return {
                department: [
                    '网络研发部',
                    '秘书处',
                    'PC技术部',
                    'UI设计部',
                    '新媒体运营部',
                    '动画部',
                    '影视部',
                ],
                previewShow:false,
                reviseShow:false,
                valueUrl: ''
                // isHidden:'hidden'
            }
        },
        methods: {
            previewClick() {
                // this.isHidden='visible'
                console.log("点击了previewClick");
                this.previewShow=!this.previewShow;
                console.log(this.previewShow);
            },
            shutDown(){
                console.log("点击了shutDown");
                this.previewShow=!this.previewShow;
                console.log(this.previewShow);
            },
            reviseClick() {
                // this.isHidden='hidden';
                console.log("点击了reviseClick");
                this.reviseShow=!this.reviseShow;
                console.log(this.reviseShow);
                
            },
            Cancel(){
                console.log("点击了Cancel");
                this.reviseShow=!this.reviseShow;
                console.log(this.reviseShow);
            },


            // 访问数据库
            async initWx() {
                    //创建新的cloud实例
                    var c1 = new this.cloud.Cloud({
                        identityless: true,
                        // 资源方 AppID 填自己的
                        resourceAppid: 'wx96f760966921f98a',
                        // 资源方环境 ID	填自己的
                        resourceEnv: 'cloud1-8g54d6xb74e96e7d'
                    })
                    //初始化,使用await将异步转化为同步
                    await c1.init()
                    console.log('初始化完成');
                    this.cloud = c1
                    this.db = this.cloud.database()
                },
            
        }
    })  

</script>

</html>